<template>
  <el-dialog
      title="司机信息"
      :visible="visible"
      @update:visible="closeDialog"
      width="50%"
      style="border-radius: 12px;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
    justify-content: center;"
      :close-on-click-modal="false"
  >
    <el-form :model="formData" :rules="rules" ref="driverForm" label-width="120px" style="padding: 20px 50px 20px 0">
      <el-form-item label="司机编号" prop="driverNo">
        <el-input v-model="formData.driverNo" placeholder="请输入司机编号" :disabled="isEdit"></el-input>
      </el-form-item>
      <el-form-item label="司机姓名" prop="driverName">
        <el-input v-model="formData.driverName" placeholder="请输入司机姓名"></el-input>
      </el-form-item>
      <el-form-item label="当前位置" prop="driverCity">
        <el-input v-model="formData.driverCity" placeholder="请输入当前位置"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="driverState">
        <el-select v-model="formData.driverState" placeholder="请选择状态">
          <el-option label="已分配车辆" value="已分配车辆"></el-option>
          <el-option label="未分配车辆" value="未分配车辆"></el-option>
        </el-select>
      </el-form-item>

      <!-- 条件渲染驾驶车辆输入框 -->
      <el-form-item v-if="formData.driverState === '已分配车辆'" label="驾驶车辆" prop="vehicleNo">
        <el-input v-model="formData.vehicleNo" placeholder="请输入驾驶车辆"></el-input>
      </el-form-item>

      <el-form-item label="联系方式" prop="driverPhone">
        <el-input v-model="formData.driverPhone" placeholder="请输入联系方式"></el-input>
      </el-form-item>
      <el-form-item label="入职时间" prop="hireDate">
        <el-date-picker v-model="formData.hireDate" type="date" disabled></el-date-picker>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { reactive, watch, onMounted } from 'vue';

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    data: {
      type: Object,
      default: () => ({}),
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['update:visible', 'save'],
  setup(props, { emit }) {
    const defaultFormData = () => ({
      driverNo: '',
      driverName: '',
      driverCity: '',
      driverState: null,
      vehicleNo: '',
      driverPhone: '',
      hireDate: '',
    });

    const formData = reactive(defaultFormData());

    const rules = reactive({
      driverNo: [{ message: '请输入司机编号', trigger: 'change' }],
      driverName: [{ message: '请输入司机姓名', trigger: 'change' }],
      driverCity: [{  message: '请输入当前位置', trigger: 'change' }],
      driverState: [{ message: '请选择司机状态', trigger: 'change' }],
      vehicleNo: [
        {
          required: formData.driverState === 'assigned',
          message: '请输入车辆编号',
          trigger: 'blur'
        }
      ],
      driverPhone: [{ message: '请输入联系方式', trigger: 'change' }],
      hireDate: [{message: '请选择入职时间' }],
    });

    const resetFormData = () => {
      Object.assign(formData, defaultFormData());
    };

    watch(
        () => props.data,
        (newData) => {
          if (props.visible) {
            Object.assign(formData, defaultFormData(), newData || {});
          }
        },
        { immediate: true }
    );

    watch(
        () => props.visible,
        (visible) => {
          if (!visible) {
            resetFormData();
          }
        }
    );

    // 监听司机状态变化，动态更新规则
    watch(
        () => formData.driverState,
        (newState) => {
          rules.vehicleNo[0].required = newState === 'assigned';
        }
    );

    const closeDialog = () => {
      emit('update:visible', false);
    };

    const save = () => {
      emit('save', formData);
    };

    onMounted(() => {
      if (props.visible) {
        Object.assign(formData, defaultFormData(), props.data || {});
      }
    });

    return {
      formData,
      closeDialog,
      save,
      rules,
    };
  },
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
